<template>
    <div class="cloud">
        <h2>文件管理</h2>
        <div class="card">
            <div class="nav">
                <h3><span>当前路径</span>{{getPath}}</h3>
            </div>
            <div class="btns">
                <button
                    class="mdui-fab mdui-fab-mini mdui-ripple"
                    @click="goBack()"
                    >
                    <i class="mdui-icon material-icons">&#xe5c4;</i>
                </button>
                <button
                    class="mdui-fab mdui-fab-mini mdui-ripple"
                    @click="refresh()"
                >
                    <i class="mdui-icon material-icons">&#xe863;</i>
                </button>
            </div>
        </div>
        <div
          class="user-files"
          @contextmenu.prevent="click"
        >
            <ul
                class="mdui-list"
                v-for="(dir, index) in filesData.dirs"
                :key="index + 'dir'"
            >
                <li
                    class="mdui-list-item mdui-ripple"
                    @click="getFileInfo(dir.name)"
                    >
                    <i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
                    <div class="mdui-list-item-content">
                      <div class="mdui-list-item-title">{{dir.name}}</div>
                      <div class="mdui-list-item-text">{{dir.date}}</div>
                    </div>
                    <i class="mdui-list-item-icon mdui-icon material-icons">info</i>
                </li>
            </ul>
            <ul
                class="mdui-list"
                v-for="(file) in filesData.files"
                :key="file.date"
                >
                <li class="mdui-list-item mdui-ripple">
                    <i class="mdui-list-item-avatar mdui-icon material-icons">insert_drive_file</i>
                    <!-- <i class="mdui-icon material-icons">insert_drive_file</i> -->
                    <div class="mdui-list-item-content">
                      <div class="mdui-list-item-title">{{file.name}}</div>
                      <div class="mdui-list-item-text">{{file.date}}</div>
                    </div>
                    <button
                      class="mdui-btn mdui-btn-icon mdui-ripple"
                      @click="del(file.name)"
                      >
                      <i class="mdui-icon material-icons">&#xe872;</i>
                    </button>
                    <i class="mdui-list-item-icon mdui-icon material-icons">info</i>
                </li>
            </ul>
        </div>
        <!-- menu -->
        <ul class="mdui-menu" id="menu">
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple">Refresh</a>
          </li>
          <li class="mdui-menu-item" disabled>
            <a href="javascript:;">Help & feedback</a>
          </li>
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple">Settings</a>
          </li>
          <li class="mdui-divider"></li>
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple">Sign out</a>
          </li>
        </ul>
    </div>
</template>

<script>
import mdui from 'mdui'
import apiConfig from '../../api/apiConfig'
import DOMUtils from '../../utils/DOMUtils'

export default {
  data () {
    return {
      filesData: [],
      nowPath: ''
    }
  },
  methods: {
    testFunc (joinPath) {
      console.log('test')
      const pathList = this.nowPath.split('/')
      if (joinPath) {
        pathList.push(joinPath)
      } else {
        pathList.pop()
      }
      const res = pathList.join('/')
      if (pathList.length === 1) {
        this.nowPath = res
        return `./${res}`
      } else {
        this.nowPath = res
        return `./${res}`
      }
    },
    async getFileInfo (joinPath) {
      const path = this.testFunc(joinPath)
      console.log(path)
      const conf = apiConfig.cloud.loadFile(path)
      const resp = await this.$axios(conf)
      this.filesData = resp.data.data
    },
    goBack () {
      if (this.nowPath === './') {
        return
      }
      this.getFileInfo()
    },
    click (e) {
      console.log('click right')
      const menu = document.querySelector('#menu')
      const li = DOMUtils.getElParentByClass(e.target, 'user-files')
      const inst = new mdui.Menu(li, menu)
      console.log(inst)
      // inst.open()
    },
    async del (e) {
      console.log(e)
      const conf = apiConfig.admin.delFile(this.nowPath, e)
      try {
        const resp = await this.$axios(conf)
        mdui.snackbar({
          message: resp.data.message,
          position: 'top',
          timeout: 2000
        })
      } catch (error) {
        console.log('err', error)
      }
      this.refresh()
    },
    async refresh () {
      console.log(this.nowPath)
      const conf = apiConfig.cloud.loadFile(`.${this.nowPath}`)
      const resp = await this.$axios(conf)
      this.filesData = resp.data.data
    }
  },
  computed: {
    getPath () {
      if (this.nowPath.length < 1) {
        return ' > Home'
      }
      const paths = this.nowPath.split('/')
      let url = ''
      for (let item of paths) {
        if (item === '.') {
          item = 'Home'
        }
        if (item !== '') {
          url = `${url} > ${item}`
        }
      }
      return url
    }
  },
  mounted () {
    console.log('mount')
    this.getFileInfo()
    // this.testFunc()
  }
}
</script>

<style lang="less" scoped>
.cloud {
    width: 90%;
    // border: 1px solid #333;
    display: flex;
    flex-direction: column;
    justify-content: center;
    h2 {
        text-align: center;
    }
}

.btns{
    button {
        margin: 5px 10px;
    }
}
</style>
